<template>
  <div class="phoneList">
    <van-image
    class="phoneListItem"
      v-for="item in list"
      :key="item"
     
      @click="$router.push(`/phoneinfo/${type}/${item.brand}`)"
      width="10rem"
      height="10rem"
      fit="cover"
      src="https://img01.yzcdn.cn/vant/cat.jpeg"
  
   >
   <template #default  >
    {{item.brand}}
   </template>
   
   </van-image>
  
  </div>
</template>
<script>
// 接收后端的数据
import { categorybrandlist } from '@/api/goods';

export default {
  data() {
    return {
      // 接收数据
      list: [],
    };
  },
  // 接收参数
  props: ['type'],
  // 调用categorybrandlist方法
  // 使异步像同步一样的执行
  methods: {
    async categorybrand(type) {
      const res = await categorybrandlist(type);
      this.list = res.data.data;
    },
  },
  // 在创建之前
  created() {
    this.categorybrand(this.type);
  },
  // 监听type的变化  参数1 新的值 参数2 旧的值
  watch: {
    type(a) {
      this.categorybrand(a);
    },
  },
};
</script>

<style lang="scss" scoped>
.phoneList{
  width:100%;
  // flex: 1 1;
  display: flex;
flex-wrap: wrap;
// justify-content: space-between;
  .phoneListItem{
    //  width: 33.3%;
     margin-right:14px ;
     margin-bottom: 50px;
    
 
  }



}


</style>